<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<canvas id="myCanvas" width="1500" height="750"></canvas>
		<script type="text/javascript">		
		var canvas = document.getElementById("myCanvas");
			//创建画笔
		var ctx = canvas.getContext("2d");
		ctx.fillstyle="#000";
		ctx.fillRect(0,0,1300,600);
		var arcX=150;
		var arcY=250;
		var arcR=50;
		var arc_vy=0;
		var arc_vx=3;

		
		setInterval(function(){
		ctx.fillStyle="rgba(0,0,0,0.1)";
		ctx.fillRect(0,0,1300,600);
		
		ctx.beginPath();	
		ctx.fillStyle=("#fff");
		ctx.arc(arcX,arcY,arcR,0,2*Math.PI);
		ctx.fill();
		
		arcY=arcY+arc_vy;
		arc_vy=arc_vy+0.16;
		arcX=arcX+arc_vx;
		
		if(arcY>600-arcR)
		{arc_vy=-arc_vy;
		arc_vy=arc_vy*0.8;
		}
		if(arcX>1300-arcR)
		{arc_vx=-arc_vx;
		arc_vx=arc_vx*0.8;
		arcX=1250;
		}
//		2	
//		ctx.beginPath();	
//		ctx.fillStyle=("#fff");
//		ctx.arc(arcX2,arcY2,arcR,0,2*Math.PI);
//		ctx.fill();
//		arc_vy=arc_vy+0.16;
//		arcY2=arcY2+ arc_vy;
//		if(arcY2>600-arcR)
//			{arc_vy=-arc_vy;}
//			
//		arc_vx=arc_vx+0.16;
//		arcX2=arcX2+ arc_vx;
//		if(arcX2>600-arcR)
//			{arc_vx =-arc_vx ;}
		},16);			
		
		</script>
	</body>s
</html>
